<template>
	<view class="page-container">
		<!-- 顶部搜索栏 -->
		<view class="smart-flex smart-row top-bar">
			<view class="text logo">苏筱然</view>
			<view class="text search-bar">搜索框..........</view>
		</view>

		<!-- 主题分类 -->
		<view class="smart-flex smart-row category-row">
			<view class="flex-item smart-bg-blue">塔斯汀</view>
			<view class="flex-item smart-bg-green">烤肉拌饭</view>
			<view class="flex-item smart-bg-red">大盘鸡</view>
			<view class="flex-item smart-bg-blue">秦记擀面皮</view>
			<view class="flex-item smart-bg-green">黄焖鸡</view>
		</view>

		<!-- 群组入口 -->
		<view class="smart-flex smart-row group-row">
			<view class="text" style="-webkit-flex:1;flex:1;">午餐盲盒</view>
			<view class="text" style="-webkit-flex:1;flex:1;">拼好饭</view>
		</view>

		<!-- 轮播图 -->
		<view class="smart-padding-wrap">
			<swiper circular indicator-dots autoplay :interval="interval" :duration="duration">
				<swiper-item><view class="swiper-item smart-bg-blue">A</view></swiper-item>
				<swiper-item><view class="swiper-item smart-bg-red">B</view></swiper-item>
				<swiper-item><view class="swiper-item smart-bg-green">C</view></swiper-item>
			</swiper>
		</view>

		<!-- 商品分类标签 -->
		<view class="smart-flex smart-row tag-row">
			<view class="text" style="-webkit-flex:1;flex:1;">奶茶</view>
			<view class="text" style="-webkit-flex:1;flex:1;">快餐汉堡</view>
			<view class="text" style="-webkit-flex:1;flex:1;">主食面食</view>
			<view class="text" style="-webkit-flex:1;flex:1;">特色美食</view>
			<view class="text" style="-webkit-flex:1;flex:1;">超市零食</view>
		</view>

		<!-- 商品展示区 -->
		<view class="goods-container">
			<view class="goods-item" v-for="(item, index) in goodsList" :key="index">
				<!-- 商品图片 -->
				<view class="goods-img" :class="item.colorClass"></view>
				<!-- 商品信息 -->
				<view class="goods-info">
					<view class="goods-name">{{ item.name }}</view>
					<view class="goods-price">¥{{ item.price }}</view>
					<view class="goods-want">{{ item.wantCount }}人购买</view>
				</view>
			</view>
		</view>

		<!-- 底部导航 -->
		<view class="bottom-nav">
			<view class="nav-item">
				<view class="nav-icon">首页</view>
			</view>
			<view class="nav-item">
				<view class="nav-icon">附近</view>
			</view>
			<view class="nav-item">
				<view class="nav-icon">订单</view>
			</view>
			<view class="nav-item">
				<view class="nav-icon">消息</view>
			</view>
			<view class="nav-item">
				<view class="nav-icon">我的</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				indicatorDots: true,
				autoplay: true,
				interval: 5000,
				duration: 500,
				// 商品数据
				goodsList: [
					{
						name: "九喜吖.鳗鱼饭.肥牛饭",
						price: 24,
						wantCount: 2000,
						colorClass: "color1"
					},
					{
						name: "李飞扬黄焖鸡",
						price: 18.8,
						wantCount: 800,
						colorClass: "color2"
					},
					{
						name: "农家烙馍村",
						price: 13,
						wantCount: 1000,
						colorClass: "color3"
					},
					{
						name: "西雅苏.新疆炒米粉",
						price:15,
						wantCount:1000,
						colorClass: "color4"
					},
					{
						name: "5号公路.披萨熊",
						price: 25,
						wantCount: 1000,
						colorClass: "color5"
					},
					{
						name: "华莱士.汉堡炸鸡",
						price:20,
						wantCount: 2500,
						colorClass: "color1"
					}
				]
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	.page-container {
		width: 100%;
		min-height: 100vh;
		background-color: #f5f5f5;
		box-sizing: border-box;
	}

	/* 顶部栏样式调整 */
	.top-bar {
		padding: 15rpx 30rpx;
		background-color: #ff4400;
	}

	.logo {
		background-color: transparent;
		color: white;
		font-size: 36rpx;
		font-weight: bold;
		margin: 0;
		padding: 0 20rpx;
	}

	.search-bar {
		background-color: white;
		border-radius: 30rpx;
		margin: 0;
		flex: 1;
		text-align: center;
	}

	/* 分类行调整 */
	.category-row {
		padding: 20rpx 10rpx;
		background-color: white;
	}

	.group-row {
		background-color: white;
		padding-bottom: 20rpx;
	}

	/* 标签行调整 */
	.tag-row {
		flex-wrap: wrap;
		padding: 10rpx;
		background-color: white;
		margin-bottom: 10rpx;
	}

	/* 商品展示区样式 */
	.goods-container {
		display: flex;
		flex-wrap: wrap;
		padding: 10rpx;
	}

	.goods-item {
		width: 50%;
		padding: 10rpx;
		box-sizing: border-box;
	}

	.goods-img {
		width: 100%;
		height: 300rpx;
		border-radius: 10rpx;
	}

	.goods-info {
		padding: 10rpx;
		background-color: white;
		border-radius: 0 0 10rpx 10rpx;
	}

	.goods-name {
		font-size: 26rpx;
		color: #333;
		line-height: 1.4;
		height: 70rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.goods-price {
		font-size: 28rpx;
		color: #f43f30;
		font-weight: bold;
		margin: 5rpx 0;
	}

	.goods-want {
		font-size: 22rpx;
		color: #999;
	}

	/* 商品色块颜色 */
	.color1 {
		background-color: #ffebee;
	}

	.color2 {
		background-color: #e8f5e9;
	}

	.color3 {
		background-color: #e3f2fd;
	}

	.color4 {
		background-color: #fff8e1;
	}

	.color5 {
		background-color: #f3e5f5;
	}

	/* 底部导航 */
	.bottom-nav {
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 100rpx;
		background-color: white;
		border-top: 1px solid #eee;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}

	.nav-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 24rpx;
		color: #666;
	}

	.nav-icon {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* 原有样式保留 */
	.scroll-view-item {
		width: 100%;
		height: 300rpx;
		line-height: 300rpx;
	}

	.scroll-x {
		white-space: nowrap;
		width: 100%;
	}

	.scroll-y {
		height: 300rpx;
	}

	.scroll-view-item-h {
		display: inline-block;
		height: 300rpx;
		width: 100%;
		line-height: 300%;
		text-align: center;
	}

	.swiper-item {
		display: block;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
	}

	.smart-page-head {
		padding: 35rpx;
		text-align: center;
	}

	.smart-page-head-title {
		font-size: 30rpx;
		height: 88rpx;
		line-height: 88rpx;
		color: #bebebe;
		border-bottom: 2rpx solid #d8d8d8;
		padding: 0 40rpx;
		box-sizing: border-box;
		display: inline-block;
	}

	.smart-padding-wrap {
		padding: 0 30rpx;
	}

	.smart-flex {
		display: flex;
	}

	.smart-row {
		flex-direction: row;
	}

	.flex-item {
		flex: 1;
		height: 200rpx;
		line-height: 200rpx;
		text-align: center;
		margin: 0 5rpx;
		border-radius: 10rpx;
	}

	.smart-bg-red {
		background: #F76260;
		color: #ffffffff;
	}

	.smart-bg-green {
		background: #09bb07;
		color: #ffffffff;
	}

	.smart-bg-blue {
		background: #007aff;
		color: #ffffffff;
	}

	.smart-column {
		flex-direction: column;
	}

	.flex-item-100 {
		width: 100%;
		height: 200rpx;
		line-height: 200rpx;
		text-align: center;
	}

	.text {
		margin: 15rpx 10rpx;
		padding: 0 20rpx;
		background-color: cadetblue;
		height: 70rpx;
		color: #777;
		font-size: 26rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 5rpx;
	}
</style>